﻿@{
	ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
	To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
		http://asp.net/mvc</a>.
</p>
@using (Html.BeginForm("UploadImage", "Home", FormMethod.Post,
	new
	{
		enctype = "multipart/form-data",
		id = "ImgForm",
		name = "ImgForm",
		target = "UploadTarget"
	}))
{

	<h3>
		Upload Image</h3>

	<input type="file" name="imageFile" />

	<input type="button" value="Save Image" onclick="UploadImage()" />
}
<iframe id="UploadTarget" name="UploadTarget" onload="UploadImage_Complete();" style="position: absolute;
	left: -999em; top: -999em;"></iframe>
<div id="Images">
</div>
<!--<img src="" id="uploadedImage"/>-->
<script type="text/javascript">

	function UploadImage() {
		$("#ImgForm").submit();
	}

	function UploadImage_Complete() {
		//Reset the image form so the file won't get uploaded again
		document.getElementById("ImgForm").reset();

		//Grab the content of the textarea we named jsonResult .  This shold be loaded into 
		//the hidden iFrame.
		var newImg = $.parseJSON($("#UploadTarget").contents().find("#jsonResult")[0].innerHTML);

		//If there was an error, display it to the user
		if (newImg.IsValid == false) {
			alert(newImg.Message);
			return;
		}

		//Create a new image and insert it into the Images div.  Just to be fancy, 
		//we're going to use a "FadeIn" effect from jQuery
		var imgDiv = $("#Images");

		var img = $('<img>')
		img.attr("src", newImg.ImagePath);

		alert(img.outerHTML);

		//Hide the image before adding to the DOM
//		var imgLink = $("<a></a>");
//		imgLink.attr("class", "example-image-link");
//		imgLink.attr("data-lightbox", "example-set");
//		imgLink.attr("href", newImg.ImagePath);
//		imgLink.attr("width", "700");
//		imgLink.attr("height", "800");
//		//imgLink.hide();
//		$(img).appendTo(imgLink);



		//imgDiv.appendChild($(img));
		//Now fade the image in
		//$(img).fadeIn(500, null);



		//Hide the image before adding to the DOM
		$(img).hide();
		imgDiv.appendChild(img);
		//Now fade the image in
		$(img).fadeIn(500, null);


	}

</script>
